import React, { useState, useEffect } from "react";
import { Row, Col, Select } from 'antd';
import { getAll } from "../services/shops";
import { findAll } from "../services/type";


import List from "../components/shops/List";
import Search from "../components/shops/Search";
import Add from "../components/shops/Add";

import Update from "../components/shops/Update";
import UpdateFile from "../components/shops/UpdateFile";

const { Option } = Select;
export default function Shops() {
  let [shops, setShops] = useState([]);
  // 搜索
  let [search, setSearch] = useState({});
  // 表格里的数据
  let [shopList, setShopList] = useState({});
  //  const [shopType,setShopType]=useState([]);
  //   分页
  let [page, setPage] = useState({
    showQuickJumper: true,
    showSizeChanger: true, //跳转
    showTotal: (total) => `总共 ${total} 条`,
    pageSizeOptions: [5, 10, 15, 20],
    style: { justifyContent: "flex-start" },
  });



  // 增加
  const show = async (obj) => {
    console.log(111);
    // obj是搜索的
    // 如果搜索有值就显示现在的，如果没有就显示上一个的
    if (obj) {
      if (!obj.current) {
        obj.current = 1;
        obj.pageSize = page.pageSize
      }
      obj = { ...search, ...obj }
      setSearch(obj);
    } else {
      obj = search;
    }
    let data = await getAll(obj);
    console.log(data, 'show');
    setShops(data.data.rows);
    setPage({ ...page, total: data.data.total, pageSize: data.data.pageSize });
  };
  //  副作用
  useEffect(() => {
    show();
  }, [shops.length]);

  return (
    <>
      <Row>
        <Col span={2}>
          <Add show={show} shop={shops}></Add>
        </Col>
        <Col span={10}>
          <Search show={show} ></Search>
        </Col>
      </Row>
      <UpdateFile show={show} shop={shops}

      ></UpdateFile>
      <List show={show} shop={shops} pagination={page} ></List>
    </>
  );
}
